component.widget-activity

widget-activity

Recent Activity

  • You have received an email from Melisa Ragae (melisa.ragae@grr-email.net) on 29 March, 2013 1 hour ago
  • You have received an email from Martin Glades (martin.glades@wee-email.com) on 29 March, 2013 1 hour ago
  • You have received an email from Martin Glades (martin.glades@wee-email.com) on 29 March, 2013 1 hour ago
  • You have received an email from Darius Jackson (darius.jackson@fake-email.net) on 29 March, 2013 1 hour ago
  • You have received an email from Melisa Ragae (melisa.ragae@grr-email.net) on 29 March, 2013 1 hour ago
<!-- Widget -->
<div class="widget widget-inverse">
	<div class="widget-head">
		<h3 class="heading"><i class="icon-stocks-up fa fa-fw"></i> Recent Activity</h3>
	</div>
	
	<div class="widget-body padding-none">

		<div class="widget widget-tabs widget-tabs-icons-only-2 widget-activity margin-none border-none">

			<!-- Tabs Heading -->
			<div class="widget-head">
				<ul>
					<li><a class="glyphicons user_add" data-toggle="tab" href="#filterUsersTab"><i></i>Users</a></li>
					<li><a class="glyphicons shopping_cart" data-toggle="tab" href="#filterOrdersTab"><i></i>Orders</a></li>
					<li class="active"><a class="glyphicons envelope" data-toggle="tab" href="#filterMessagesTab"><i></i></a></li>
					<li><a class="glyphicons link" data-toggle="tab" href="#filterLinksTab"><i></i></a></li>
					<li><a class="glyphicons camera" data-toggle="tab" href="#filterPhotosTab"><i></i></a></li>
				</ul>
			</div>
			<!-- // Tabs Heading END -->
			
			<div class="widget-body padding-none">
				<div class="tab-content">
						
										
					<!-- Filter Users Tab -->
					<div class="tab-pane" id="filterUsersTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> registered at <a href="">Darius Jackson's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> registered at <a href="">John Doe's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">Jane Doe's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> registered at <a href="">Darius Jackson's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon user_add"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> registered at <a href="">Jane Doe's</a> suggestion.</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Users Tab END -->
					
					<!-- Filter Orders Tab -->
					<div class="tab-pane" id="filterOrdersTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of &euro;50 (<a href="">order #2301</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of &euro;50 (<a href="">order #2302</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2303</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2304</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon shopping_cart"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of &euro;50 (<a href="">order #2305</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Orders Tab END -->
					
					<!-- Filter Messages Tab -->
					<div class="tab-pane active" id="filterMessagesTab">
						<ul class="list">
						
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Melisa Ragae</a> (melisa.ragae@grr-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double highlight">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Martin Glades</a> (martin.glades@wee-email.com)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Martin Glades</a> (martin.glades@wee-email.com)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Darius Jackson</a> (darius.jackson@fake-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
																					<!-- Activity item -->
							<li class="double">
								<span class="glyphicons activity-icon envelope"><i></i></span>
								<span class="ellipsis">
									You have received an email from <a href="">Melisa Ragae</a> (melisa.ragae@grr-email.net)
									<span class="meta">on 29 March, 2013 <span>1 hour ago</span></span>
								</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Messages Tab END -->
					
					<!-- Filter Links Tab -->
					<div class="tab-pane" id="filterLinksTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of &euro;50 (<a href="">order #2301</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Melisa Ragae</a> bought 10 items worth of &euro;50 (<a href="">order #2302</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2303</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of &euro;50 (<a href="">order #2304</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon link"><i></i></span>
								<span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of &euro;50 (<a href="">order #2305</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Links Tab END -->
					
					<!-- Filter Photos Tab -->
					<div class="tab-pane" id="filterPhotosTab">
						<ul class="list">
						
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">Darius Jackson</a> bought 10 items worth of &euro;50 (<a href="">order #2301</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">Martin Glades</a> bought 10 items worth of &euro;50 (<a href="">order #2302</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">John Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2303</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														<!-- Activity item -->
							<li>
								<span class="date">21/03</span>
								<span class="glyphicons activity-icon camera"><i></i></span>
								<span class="ellipsis"><a href="">Jane Doe</a> bought 10 items worth of &euro;50 (<a href="">order #2304</a>)</span>
								<div class="clearfix"></div>
							</li>
							<!-- // Activity item END -->
														
						</ul>
					</div>
					<!-- // Filter Photos Tab END -->
				
				</div>
			</div>
		</div>
		
	</div>
</div>

Code

@import "assets/components/modules/admin/widgets/widget-activity/assets/less/widget-activity.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

widget-activity-2

Activity

  • Sales today €5,900
  • Some other stats 36,900
  • Some stunning stats 26,999
  • Awesome stats 4,900
<!-- Activity/List Widget -->
<h2 class="margin-none separator bottom"><i class="icon-signal text-primary icon-fixed-width"></i> Activity</h2>
<div class="widget widget-heading-simple widget-body-gray" data-toggle="collapse-widget">
	<div class="widget-body list">
		<ul>
		
			<!-- List item -->
			<li>
				<span>Sales today</span>
				<span class="count">&euro;5,900</span>
			</li>
			<!-- // List item END -->
			
			<!-- List item -->
			<li>
				<span>Some other stats</span>
				<span class="count">36,900</span>
			</li>
			<!-- // List item END -->
			
			<!-- List item -->
			<li>
				<span>Some stunning stats</span>
				<span class="count">26,999</span>
			</li>
			<!-- // List item END -->
			
			<!-- List item -->
			<li>
				<span>Awesome stats</span>
				<span class="count">4,900</span>
			</li>
			<!-- // List item END -->
			
		</ul>
	</div>
</div>
<!-- // Activity/List Widget END -->

Code

@import "assets/components/modules/admin/widgets/widget-activity/assets/less/widget-activity.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/tabs/assets/tabs.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.